<template>
	<view class="p20 h100vh">
		<view class="ox-auto  br--20 p20">
			<view class="flex  ox-auto w-max">
				<view @click="orderStateChange(item.status)" :class="orderState == item.status ? 'active' : ''"
					class="pr center  vvl40 fs32 fw p10" v-for="(item,index) in tabList" :key="index">
					<view class="">{{item.label}}</view>
					<image v-show="orderState == item.status" src="../../static/tabs-underline.png" mode="widthFix">
					</image>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-view oy-auto  pr h100 " @scrolltolower="getMore">
			<view class="p20 bag--fff mt20 br--20" v-for="(item,index) in list" :key="index">
				<view class="flex j-between a-center">
					<view class="fw f15 ">
						{{item.title}}
					</view>
					<view class="f14 ">
						待审核
					</view>
				</view>
				<view class="flex a-center ju--between mt20">
					<view class="cred f15">
						{{item.salary_full_name}}
						<!-- <span class="f10 ml10 co--7676"></span> -->
					</view>
					<view class="co--999 f12">
						1分钟前
					</view>
				</view>
				<view class=" f12 flex a-center mt20">
					<view class="bag co--7676">
						{{item.service_city_name}}
					</view>
					<!-- <view class="bag co--7676 ml20">
						桃城
					</view> -->
				</view>
				<view class="flex a-center bort1 pt20 co--7676 fs12 mt30">
					<view class="but" @click.stop="shuaxin(item.id)">
						刷新
					</view>
					<view class="but ml20">
						编辑
					</view>
					<view class="but ml20" @click.stop="tingz(item.id)">
						停止
					</view>
				</view>
			</view>
			<view class="center fs12 co--999 mt10">
				上滑加载更多
			</view>
		</scroll-view>
		<my-popup :show="show" confirmText='确定' @confirm="subtz" @cancel="show=false">
			确定要停止吗？
		</my-popup>
		<my-popup :show="showsx" confirmText='确定' @confirm="shuax" @cancel="showsx=false">
			确定要刷新吗？
		</my-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderState: 0,
				tabList: [{
					label: '全部',
					status: 0
				}, {
					label: '已发布',
					status: 1
				}, {
					label: '待审核',
					status: 2
				}, {
					label: '已停止',
					status: 3
				}],
				pageNo: 1,
				list: [],
				show: false,
				showsx: false,
				tzid: null
			}
		},
		onLoad() {
			this.getlist()
		},
		methods: {
			resetArr() {
				this.pageNo = 1
			},
			orderStateChange(id) { // 订单状态变化
				if (this.orderState !== id) {
					this.orderState = id
					// this.resetArr()
					if (this.type == 0) {
						// this.nurseOrderList()
					} else {
						// this.accompanyOrderList()
					}
				}
			},
			getMore() {
				this.pageNo++
				console.log(this.pageNo)
			},
			async getlist() {
				let {
					data
				} = await this.$rqt.myServiceLists({
					type: 1,
					// check_status: 1
				})
				console.log(data)
				this.list.push(...data.lists)
			},
			async subtz() {
				let {
					data
				} = await this.$rqt.stopMyService({
					id: this.tzid
				})
				console.log(data)
			},
			tingz(e) {
				this.show = true
				this.tzid = e
			},
			async shuax() {
				let {
					data
				} = await this.$rqt.sentMyService({
					id: this.tzid
				})
				console.log(data)
			},
			shuaxin(e) {
				this.showsx = true
				this.tzid = e
			}
		}
	}
</script>

<style lang="scss">
	.w-max {
		width: max-content;

		.active {
			color: var(--cg);
		}

		image {
			width: 20rpx;
			position: absolute;
			bottom: 10rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.vvl40+.vvl40 {
		margin-left: 40rpx;
	}

	.w3 {
		width: 3em;
	}

	.but {
		width: 108rpx !important;
		height: 46rpx !important;
		border-radius: 8rpx;
		border: 2rpx solid #AAAAAA;
		text-align: center;
	}

	.bort1 {
		border-top: 2rpx solid #AAAAAA;
	}
</style>